<!DOCTYPE html>
<html>
<head>
    <title>Inclined Plane with Blocks</title>
</head>
<body>
    <canvas id="physicsCanvas" width="500" height="320"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;

        // Parameters for the inclined plane
        const cornerX = 420;
        const cornerY = 270;
        const angleDegrees = 30;
        const angleRadians = angleDegrees * Math.PI / 180;
        const cosAngle = Math.cos(angleRadians);
        const sinAngle = Math.sin(angleRadians);
        const hypotenuseLength = 380;
        const inclineStartX = cornerX - hypotenuseLength * cosAngle;
        const inclineStartY = cornerY - hypotenuseLength * sinAngle;

        // Draw the horizontal base line
        ctx.beginPath();
        ctx.moveTo(100, cornerY);
        ctx.lineTo(cornerX, cornerY);
        ctx.stroke();

        // Draw the inclined plane surface
        ctx.beginPath();
        ctx.moveTo(inclineStartX, inclineStartY);
        ctx.lineTo(cornerX, cornerY);
        ctx.stroke();

        // Draw the angle arc
        const arcRadius = 50;
        ctx.beginPath();
        // The arc starts on the horizontal line (PI radians) and moves clockwise to the inclined line (PI - angleRadians)
        ctx.arc(cornerX, cornerY, arcRadius, Math.PI, Math.PI - angleRadians, false);
        ctx.stroke();

        // Draw the angle label
        ctx.font = '18px serif';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // Position the label inside the arc
        const labelAngle = Math.PI - (angleRadians / 2);
        const labelRadius = arcRadius * 0.6;
        const labelX = cornerX + labelRadius * Math.cos(labelAngle);
        const labelY = cornerY + labelRadius * Math.sin(labelAngle);
        ctx.fillText('\u03B8 = 30\u00B0', labelX - 5, labelY + 10);

        // Function to draw a block with its number
        function drawBlock(number, distanceFromCorner) {
            const blockSize = 30;
            const halfBlockSize = blockSize / 2;

            // Calculate the center of the block on the incline
            const centerX = cornerX - distanceFromCorner * cosAngle;
            const centerY = cornerY - distanceFromCorner * sinAngle;

            // Save the current context state
            ctx.save();

            // Translate and rotate the context to draw the block
            ctx.translate(centerX, centerY);
            ctx.rotate(-angleRadians);

            // Draw the square block
            ctx.strokeRect(-halfBlockSize, -halfBlockSize, blockSize, blockSize);

            // Restore the context to its original state
            ctx.restore();

            // Calculate position for the block's number label (above the block)
            const labelOffset = 25; // Distance from block center to label
            // The direction is perpendicular to the incline (outward)
            const numberLabelX = centerX + labelOffset * sinAngle;
            const numberLabelY = centerY - labelOffset * cosAngle;
            
            // Draw the number
            ctx.font = '20px serif';
            ctx.fillText(number.toString(), numberLabelX, numberLabelY);
        }

        // Define the distances of each block from the bottom corner of the incline
        const blockDistances = [320, 250, 180, 110, 40]; // For blocks 1, 2, 3, 4, 5 respectively

        // Draw all five blocks
        for (let i = 0; i < blockDistances.length; i++) {
            drawBlock(i + 1, blockDistances[i]);
        }
    </script>
</body>
</html>